<template>
    商品页
    <!-- 导航区 -->
    <ul>
        <!-- 方式一:通过query传参 -->
        <!-- <li v-for="product in products">
            <router-link :to="{
                path: '/product/detail',
                query: {
                    id: product.id,
                    name: product.name,
                    price: product.price
                }
            }">{{ product.name }}</router-link>
        </li> -->
        <!-- 
            方式二:通过params传参
            该方式不能使用path,必须通过name配置
            在路由中必须提前在规则中进行占位
        -->
        <li v-for="product in products">
            <router-link :to="{
                name: 'xq',
                params: {
                    id: product.id,
                    name: product.name,
                    price: product.price
                }
            }">{{ product.name }}</router-link>
        </li>
    </ul>
    <hr>
    <!-- 展示区 -->
    <div class="detail">
        <router-view></router-view>
    </div>
</template>
<script setup>
import { reactive } from 'vue';
import { RouterLink, RouterView } from 'vue-router';
-RouterLink

const products = reactive([{
    id: 1,
    name: '波司登羽绒服',
    price: 9999.0
}, {
    id: 2,
    name: '野马头盔',
    price: 99.0
}, {
    id: 3,
    name: 'iphone17',
    price: 5999.0
}])
</script>